<template>
  <view class="switch-draw" :class="{ 'switch-draw-active': isShowSlot || isChecked }">
    <view class="draw-titles">
      <view class="title-text"
        >{{ title }}
        <slot name="icon"></slot>
      </view>

      <view class="title-switch">
        <switch @change="switchChange" :checked="isChecked" color="var(--primary-color)"></switch>
      </view>
    </view>
    <slot v-if="isShowSlot || isChecked"></slot>
  </view>
</template>
<script setup lang="ts">
const props = defineProps<{
  title: string
  isChecked: boolean
}>()
const emit = defineEmits<{
  (e: 'changes', tips: boolean): void
}>()
const isShowSlot = ref(false)
function switchChange(e: any) {
  isShowSlot.value = e.detail.value
  emit('changes', isShowSlot.value)
}
</script>
<style lang="less">
.switch-draw {
  background: var(--primary-grey-light, #f4f4f6);
  padding: 0 32rpx;
  min-height: 112rpx;

  .draw-titles {
    width: 100%;
    height: 112rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-text {
      color: var(--primary-petrol, #2d3746);
      font-size: 36rpx;
      font-weight: 600;
      letter-spacing: -0.5px;
    }
  }
}
.switch-draw-active {
  padding-bottom: 36rpx;
}
</style>
